<template>
  <div>
    <div class="box">
      <div class="item">
        <div class="top">
          <div class="left">价格</div>
          <div class="right">0-{{$route.query.price_lt||price*40}}</div>
        </div>
        <div class="bottom">
          <el-slider @change="setpriceValue" v-model="price" :format-tooltip="totalprice"></el-slider>
        </div>
      </div>
      <!-- 住宿等级 -->
      <div class="item">
        <div class="top">住宿等级</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{gradeValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <el-dropdown-item v-for="(item,index) in grade" :key="index">
                <template>
                  <div @click="gradeClick(index)">
                    <i :class="['iconfont',{iconcircle:!item.flag},{'iconright-1':item.flag}]"></i>
                    {{item.name}}
                  </div>
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 住宿类型 -->
      <div class="item">
        <div class="top">住宿类型</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{typeValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <el-dropdown-item v-for="(item,index) in type" :key="index">
                <template>
                  <div @click="typeClick(index)">
                    <i :class="['iconfont',{iconcircle:!item.flag},{'iconright-1':item.flag}]"></i>
                    {{item.name}}
                  </div>
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 酒店设施 -->
      <div class="item">
        <div class="top">酒店设施</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{facilityValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <el-dropdown-item v-for="(item,index) in facility" :key="index">
                <template>
                  <div @click="facilityClick(index)">
                    <i :class="['iconfont',{iconcircle:!item.flag},{'iconright-1':item.flag}]"></i>
                    {{item.name}}
                  </div>
                </template>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 酒店品牌 -->
      <div class="item brand">
        <div class="top">酒店品牌</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{BrandValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <div class="filter-view-menu-box">
                <el-dropdown-item v-for="(item,index) in Brand" :key="index">
                  <template>
                    <div @click="BrandClick(index)">
                      <i :class="['iconfont',{iconcircle:!item.flag},{'iconright-1':item.flag}]"></i>
                      {{item.name}}
                    </div>
                  </template>
                </el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="item">
        <el-button type="primary" @click="removeCondition">撤销条件</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 4000,
      // 住宿等级
      gradeValue: '不限',
      grade: [],
      checkedgrade: [],
      checkedgradeList: [],
      // 住宿类型
      typeValue: '不限',
      type: [],
      checkedtype: [],
      checkedtypeList:[],
      // 酒店设施
      facilityValue: '不限',
      facility: [],
      checkedfacility: [],
      checkedfacilityList:[],
      // 酒店品牌
      BrandValue: '不限',
      Brand: [],
      checkedBrand: [],
      checkedBrandList:[]
    }
  },
  created() {
    this.getHotelsOptions()
  },
  methods: {
    // 获取所有晒选的下拉列表
    async getHotelsOptions() {
      const { data: res } = await this.$axios.get('/hotels/options')
      // 住宿等级
      this.grade = res.data.levels.map(x => {
        return {
          ...x,
          flag: false
        }
      })
      // 住宿类型
      this.type = res.data.types.map(x => {
        return {
          ...x,
          flag: false
        }
      })
      // 酒店设施
      this.facility = res.data.assets.map(x => {
        return {
          ...x,
          flag: false
        }
      })
      // 酒店品牌
      this.Brand = res.data.brands.map(x => {
        return {
          ...x,
          flag: false
        }
      })
    },

    // 改变一下所有数据都要重新更新地图和hotelList

    // 价格筛选变化
    totalprice(val) {
      return val * 40
    },
    // 价格变化完成后
    setpriceValue(val) {
      var obj = { ...this.$route.query }
      var str = '/hotel?'
      obj.price_lt = val * 40

      // 住宿等级
      var hotellevelArr = []
      // 住宿类型
      var hoteltypeArr = []
      // 酒店设施
      var hotelassetArr = []
      // 酒店品牌
      var hotelbrandArr = []
      // / 住宿等级
      if (this.$route.query.hotellevel_in) {
        hotellevelArr = [...this.$route.query.hotellevel_in]
      }
      // 住宿类型
      if (this.$route.query.hoteltype_in) {
        hoteltypeArr = [...this.$route.query.hoteltype_in]
      }
      // 酒店设施
      if (this.$route.query.hotelasset_in) {
        hotelassetArr = [...this.$route.query.hotelasset_in]
      }
      // 酒店品牌
      if (this.$route.query.hotelbrand_in) {
        hotelbrandArr = [...this.$route.query.hotelbrand_in]
      }
      // 判断住宿等级是否是数组
      if (hotellevelArr.length > 1) {
        delete obj.hotellevel_in
        hotellevelArr.forEach(x => {
          str += 'hotellevel_in=' + x + '&'
        })
      }
      // 判断住宿类型是否是数组
      if (hoteltypeArr.length > 1) {
        delete obj.hoteltype_in
        hoteltypeArr.forEach(x => {
          str += 'hoteltype_in=' + x + '&'
        })
      }
      // 判断酒店设施是否是数组
      if (hotelassetArr.length > 1) {
        delete obj.hotelasset_in
        hotelassetArr.forEach(x => {
          str += 'hotelasset_in=' + x + '&'
        })
      }
      // 判断酒店品牌是否是数组
      if (hotelbrandArr.length > 1) {
        delete obj.hotelbrand_in
        hotelbrandArr.forEach(x => {
          str += 'hotelbrand_in=' + x + '&'
        })
      }

      for (var key in obj) {
        str += key + '=' + obj[key] + '&'
      }
      str = str.replace(/&$/, '')
      this.$router.replace(str)
    },
    // 住宿等级
    gradeClick(i) {
      // 将已有的地址拼接好
      var str = '/hotel?'
      var obj = { ...this.$route.query }
      delete obj.hotellevel_in
      
      /* var hotellevelArr = [] */
      // 住宿类型
      var hoteltypeArr = []
      // 酒店设施
      var hotelassetArr = []
      // 酒店品牌
      var hotelbrandArr = []
      // 住宿类型
      if (this.$route.query.hoteltype_in) {
        hoteltypeArr = [...this.$route.query.hoteltype_in]
      }
      // 酒店设施
      if (this.$route.query.hotelasset_in) {
        hotelassetArr = [...this.$route.query.hotelasset_in]
      }
      // 酒店品牌
      if (this.$route.query.hotelbrand_in) {
        hotelbrandArr = [...this.$route.query.hotelbrand_in]
      }
      // 判断住宿类型是否是数组
      if (hoteltypeArr.length > 1) {
        delete obj.hoteltype_in
        hoteltypeArr.forEach(x => {
          str += 'hoteltype_in=' + x + '&'
        })
      }
      // 判断酒店设施是否是数组
      if (hotelassetArr.length > 1) {
        delete obj.hotelasset_in
        hotelassetArr.forEach(x => {
          str += 'hotelasset_in=' + x + '&'
        })
      }
      // 判断酒店品牌是否是数组
      if (hotelbrandArr.length > 1) {
        delete obj.hotelbrand_in
        hotelbrandArr.forEach(x => {
          str += 'hotelbrand_in=' + x + '&'
        })
      }

      for (var key in obj) {
        str += key + '=' + obj[key] + '&'
      }
      // 改变选中状态
      this.grade[i].flag = !this.grade[i].flag
      // 过滤出选中的数组
      this.chekedgrade = this.grade.filter(x => x.flag)
      // 判断显示的文字
      if (this.chekedgrade.length == 0) {
        this.gradeValue = '不限'
      } else if (this.chekedgrade.length == 1) {
        this.gradeValue = this.chekedgrade[0].name
      } else if (this.chekedgrade.length > 1) {
        this.gradeValue = `已选${this.chekedgrade.length}项`
      }
      // 过滤出选中的数组
      this.checkedgradeList = this.grade.filter(x => x.flag == true)
      var newStr = ''
      if (this.checkedgradeList.length != 0) {
        this.checkedgradeList.forEach(x => {
          newStr += 'hotellevel_in=' + x.id + '&'
        })
      }
      str = (str+newStr).replace(/&$/, '')
      this.$router.replace(str)
    },
    // 住宿类型
    typeClick(i) {
      // 将已有的地址拼接好
      var str = '/hotel?'
      var obj = { ...this.$route.query }
      delete obj.hoteltype_in
      
      var hotellevelArr = []

      // 酒店设施
      var hotelassetArr = []
      // 酒店品牌
      var hotelbrandArr = []
      // / 住宿等级
      if (this.$route.query.hotellevel_in) {
        hotellevelArr = [...this.$route.query.hotellevel_in]
      }

      // 酒店设施
      if (this.$route.query.hotelasset_in) {
        hotelassetArr = [...this.$route.query.hotelasset_in]
      }
      // 酒店品牌
      if (this.$route.query.hotelbrand_in) {
        hotelbrandArr = [...this.$route.query.hotelbrand_in]
      }
      // 判断住宿等级是否是数组
      if (hotellevelArr.length > 1) {
        delete obj.hotellevel_in
        hotellevelArr.forEach(x => {
          str += 'hotellevel_in=' + x + '&'
        })
      }

      // 判断酒店设施是否是数组
      if (hotelassetArr.length > 1) {
        delete obj.hotelasset_in
        hotelassetArr.forEach(x => {
          str += 'hotelasset_in=' + x + '&'
        })
      }
      // 判断酒店品牌是否是数组
      if (hotelbrandArr.length > 1) {
        delete obj.hotelbrand_in
        hotelbrandArr.forEach(x => {
          str += 'hotelbrand_in=' + x + '&'
        })
      }

      for (var key in obj) {
        str += key + '=' + obj[key] + '&'
      }

      // 改变选中状态
      this.type[i].flag = !this.type[i].flag
      // 过滤出选中的数组
      this.checkedtype = this.type.filter(x => x.flag)
      // 判断显示的文字
      if (this.checkedtype.length == 0) {
        this.typeValue = '不限'
      } else if (this.checkedtype.length == 1) {
        this.typeValue = this.checkedtype[0].name
      } else if (this.checkedtype.length > 1) {
        this.typeValue = `已选${this.checkedtype.length}项`
      }
     
     // 过滤出选中的数组
      this.checkedtypeList = this.type.filter(x => x.flag == true)
      var newStr = ''
      if (this.checkedtypeList.length != 0) {
        this.checkedtypeList.forEach(x => {
          newStr += 'hoteltype_in=' + x.id + '&'
        })
      }
      str = (str+newStr).replace(/&$/, '')
      this.$router.replace(str)
    },
    // 酒店设施
    facilityClick(i) {
      // 将已有的地址拼接好
      var str = '/hotel?'
      var obj = { ...this.$route.query }
      delete obj.hotelasset_in
      
      var hotellevelArr = []
      // 住宿类型
      var hoteltypeArr = []

      // 酒店品牌
      var hotelbrandArr = []
      // / 住宿等级
      if (this.$route.query.hotellevel_in) {
        hotellevelArr = [...this.$route.query.hotellevel_in]
      }
      // 住宿类型
      if (this.$route.query.hoteltype_in) {
        hoteltypeArr = [...this.$route.query.hoteltype_in]
      }

      // 酒店品牌
      if (this.$route.query.hotelbrand_in) {
        hotelbrandArr = [...this.$route.query.hotelbrand_in]
      }
      // 判断住宿等级是否是数组
      if (hotellevelArr.length > 1) {
        delete obj.hotellevel_in
        hotellevelArr.forEach(x => {
          str += 'hotellevel_in=' + x + '&'
        })
      }
      // 判断住宿类型是否是数组
      if (hoteltypeArr.length > 1) {
        delete obj.hoteltype_in
        hoteltypeArr.forEach(x => {
          str += 'hoteltype_in=' + x + '&'
        })
      }

      // 判断酒店品牌是否是数组
      if (hotelbrandArr.length > 1) {
        delete obj.hotelbrand_in
        hotelbrandArr.forEach(x => {
          str += 'hotelbrand_in=' + x + '&'
        })
      }

      for (var key in obj) {
        str += key + '=' + obj[key] + '&'
      }

      // 改变选中状态
      this.facility[i].flag = !this.facility[i].flag
      // 过滤出选中的数组
      this.checkedfacility = this.facility.filter(x => x.flag)
      // 判断显示的文字
      if (this.checkedfacility.length == 0) {
        this.facilityValue = '不限'
      } else if (this.checkedfacility.length == 1) {
        this.facilityValue = this.checkedfacility[0].name
      } else if (this.checkedfacility.length > 1) {
        this.facilityValue = `已选${this.checkedfacility.length}项`
      }
      
      // 过滤出选中的数组
      this.checkedfacilityList = this.facility.filter(x => x.flag == true)
      var newStr = ''
      if (this.checkedfacilityList.length != 0) {
        this.checkedfacilityList.forEach(x => {
          newStr += 'hotelasset_in=' + x.id + '&'
        })
      }
      str = (str+newStr).replace(/&$/, '')
      this.$router.replace(str)

    },
    // 酒店品牌
    BrandClick(i) {
      // 将已有的地址拼接好
      var str = '/hotel?'
      var obj = { ...this.$route.query }
      delete obj.hotelbrand_in
      
      var hotellevelArr = []
      // 住宿类型
      var hoteltypeArr = []
      // 酒店设施
      var hotelassetArr = []
      // / 住宿等级
      if (this.$route.query.hotellevel_in) {
        hotellevelArr = [...this.$route.query.hotellevel_in]
      }
      // 住宿类型
      if (this.$route.query.hoteltype_in) {
        hoteltypeArr = [...this.$route.query.hoteltype_in]
      }
      // 酒店设施
      if (this.$route.query.hotelasset_in) {
        hotelassetArr = [...this.$route.query.hotelasset_in]
      }

      // 判断住宿等级是否是数组
      if (hotellevelArr.length > 1) {
        delete obj.hotellevel_in
        hotellevelArr.forEach(x => {
          str += 'hotellevel_in=' + x + '&'
        })
      }
      // 判断住宿类型是否是数组
      if (hoteltypeArr.length > 1) {
        delete obj.hoteltype_in
        hoteltypeArr.forEach(x => {
          str += 'hoteltype_in=' + x + '&'
        })
      }
      // 判断酒店设施是否是数组
      if (hotelassetArr.length > 1) {
        delete obj.hotelasset_in
        hotelassetArr.forEach(x => {
          str += 'hotelasset_in=' + x + '&'
        })
      }

      for (var key in obj) {
        str += key + '=' + obj[key] + '&'
      }



      // 改变选中状态
      this.Brand[i].flag = !this.Brand[i].flag
      // 过滤出选中的数组
      this.checkedBrand = this.Brand.filter(x => x.flag)
      // 判断显示的文字
      if (this.checkedBrand.length == 0) {
        this.BrandValue = '不限'
      } else if (this.checkedBrand.length == 1) {
        this.BrandValue = this.checkedBrand[0].name
      } else if (this.checkedBrand.length > 1) {
        this.BrandValue = `已选${this.checkedBrand.length}项`
      }
      // 过滤出选中的数组
      this.checkedBrandList = this.Brand.filter(x => x.flag == true)
      var newStr = ''
      if (this.checkedBrandList.length != 0) {
        this.checkedBrandList.forEach(x => {
          newStr += 'hotelbrand_in=' + x.id + '&'
        })
      }
      str = (str+newStr).replace(/&$/, '')
      this.$router.replace(str)
    },
    // 撤销条件
    removeCondition(){
      var cityName = this.$route.query.cityName
      this.$router.replace('/hotel?cityName='+cityName)
      // 清空数据
      this.getHotelsOptions()
      this.gradeValue="不限"
      this.typeValue="不限"
      this.facilityValue="不限"
      this.BrandValue="不限"
      this.price = 4000
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  margin: 20px 0;
  height: 79px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  .item {
    height: 65px;
    flex: 1;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    padding: 0 20px;
    color: #666;
    justify-content: center;
    &:first-child {
      border: none;
      .bottom {
        display: block;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      height: 38px;
      display: flex;
      align-items: center;
      .el-dropdown {
        width: 100%;
        cursor: pointer;
        span {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
.filter-view-menu-box {
  max-height: 230px;
  overflow: auto;
}
.el-dropdown-menu {
  min-width: 200px;
}

/deep/ .el-dropdown-menu__item i {
  margin-right: 10px;
}
</style>
